/*放大缩小淡入出现*/
@keyframes bounceIn {
    0%,100%,20%,40%,60%,80%{
        -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
    0%{
        opacity:0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3);
    }
    20%{
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1);
    }
    40%{
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9);
    }
    60%{
        opacity:1;
        -webkit-transform: scale3d(1.03,1.03,1.03);
        transform: scale3d(1.03,1.03,1.03);
    }
    80%{
        -webkit-transform: scale3d(0.97,0.97,0.97);
        transform: scale3d(0.97,0.97,0.97);
    }
    100%{
        opacity:1;
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
    }
}
@-webkit-keyframes bounceIn {
    0%,100%,20%,40%,60%,80%{
        -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
    0%{
        opacity:0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3);
    }
    20%{
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1);
    }
    40%{
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9);
    }
    60%{
        opacity:1;
        -webkit-transform: scale3d(1.03,1.03,1.03);
        transform: scale3d(1.03,1.03,1.03);
    }
    80%{
        -webkit-transform: scale3d(0.97,0.97,0.97);
        transform: scale3d(0.97,0.97,0.97);
    }
    100%{
        opacity:1;
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
    }
}

/*向上淡入出现*/
@keyframes fadeInUp {
    0%{
        opacity:0;
        -webkit-transform: translate3d(0, 30%, 0);
        transform: translate3d(0, 30%, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes fadeInUp {
    0%{
        opacity:0;
        -webkit-transform: translate3d(0, 30%, 0);
        transform: translate3d(0, 30%, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}

/*向左淡入出现*/
@keyframes fadeInLeft {
    0%{
        opacity:0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes fadeInLeft {
    0%{
        opacity:0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}

/*向右淡入出现*/
@keyframes fadeInRight {
    0%{
        opacity:0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes fadeInRight {
    0%{
        opacity:0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}

/*向下淡入出现*/
@keyframes fadeInDown {
    0%{
        opacity:0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes fadeInDown {
    0%{
        opacity:0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}

/*自由落体运动*/
@keyframes bounceInDown {
    0%,100%,60%,75%,90%{
        -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
    0%{
        opacity:0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    60%{
        opacity:1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }
    75%{
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    90%{
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes bounceInDown {
    0%,100%,60%,75%,90%{
        -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
    0%{
        opacity:0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    60%{
        opacity:1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }
    75%{
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    90%{
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}

/*向上弹出出现*/
@keyframes bounceInUp {
    0%,100%,60%,75%,90%{
        -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
    0%{
        opacity:0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }
    60%{
        opacity:1;
        -webkit-transform: translate3d(0, -25px, 0);
        transform: translate3d(0, -25px, 0);
    }
    75%{
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    90%{
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes bounceInUp {
    0%,100%,60%,75%,90%{
        -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
    0%{
        opacity:0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }
    60%{
        opacity:1;
        -webkit-transform: translate3d(0, -25px, 0);
        transform: translate3d(0, -25px, 0);
    }
    75%{
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    90%{
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}
/*从左边淡入弹出*/
@keyframes bounceInLeft{
    0%,100%,60%,75%,90%{
        -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
    0%{
        opacity:0;
        -webkit-transform: translate3d(-3000px, 0px, 0);
        transform: translate3d(-3000px, 0, 0);
    }
    60%{
        opacity:1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }
    75%{
        opacity:1;
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    90%{
        opacity:1;
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes bounceInLeft{
    0%,100%,60%,75%,90%{
        -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
    0%{
        opacity:0;
        -webkit-transform: translate3d(-3000px, 0px, 0);
        transform: translate3d(-3000px, 0, 0);
    }
    60%{
        opacity:1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }
    75%{
        opacity:1;
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    90%{
        opacity:1;
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}

/*从右边淡入弹出*/
@keyframes bounceInRight{
    0%,100%,60%,75%,90%{
        -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
    0%{
        opacity:0;
        -webkit-transform: translate3d(3000px, 0px, 0);
        transform: translate3d(3000px, 0, 0);
    }
    60%{
        opacity:1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }
    75%{
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    90%{
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes bounceInRight{
    0%,100%,60%,75%,90%{
        -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
    0%{
        opacity:0;
        -webkit-transform: translate3d(3000px, 0px, 0);
        transform: translate3d(3000px, 0, 0);
    }
    60%{
        opacity:1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }
    75%{
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    90%{
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }
    100%{
        opacity:1;
        -webkit-transform: none;
        transform: none;
    }
}

/*弹性出来*/
@-webkit-keyframes rubberBand{
    0%{
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity:1;
    }
    30%{
        -webkit-transform: scale3d(1.25,0.75, 1);
        transform: scale3d(1.25,0.75, 1);
    }
    40%{
        -webkit-transform: scale3d(0.15,0.85,1);
        transform: scale3d(0.15,0.85,1);
    }
    50%{
        -webkit-transform: scale3d(1.15,0.85,1);
        transform: scale3d(1.15,0.85,1);
    }
    65%{
        -webkit-transform: scale3d(0.95,1.05, 1);
        transform: scale3d(0.95,1.05, 1);
    }
    75%{
        -webkit-transform: scale3d(1.05,0.95, 1);
        transform: scale3d(1.05,0.95, 1);
    }
    100%{
        opacity:1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes rubberBand{
    0%{
        opacity:1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30%{
        -webkit-transform: scale3d(1.25,0.75, 1);
        transform: scale3d(1.25,0.75, 1);
    }
    40%{
        -webkit-transform: scale3d(0.15,0.85,1);
        transform: scale3d(0.15,0.85,1);
    }
    50%{
        -webkit-transform: scale3d(1.15,0.85,1);
        transform: scale3d(1.15,0.85,1);
    }
    65%{
        -webkit-transform: scale3d(0.95,1.05, 1);
        transform: scale3d(0.95,1.05, 1);
    }
    75%{
        -webkit-transform: scale3d(1.05,0.95, 1);
        transform: scale3d(1.05,0.95, 1);
    }
    100%{
        opacity:1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

/*旋转一圈*/
@-webkit-keyframes rotate0 {
    to{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate0 {
    to{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes zoomFallDown{
    0%{
        -webkit-transform: scale(3);
        transform: scale(3);
    }
    100%{
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes zoomFallDown{
    0%{
        -webkit-transform: scale(3);
        transform: scale(3);
    }
    100%{
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


@-webkit-keyframes fadeIn{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
@keyframes fadeIn{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
